<template>
  <div class="my-4 flex items-center text-sm">
    {{ secondValue }}
    <el-radio-group v-model="radio" type="vertical">
      <el-radio value="1" label="1" @change="redioChange('1')"> 通配符* </el-radio>
      <el-radio value="2" label="2"
        >周期从 <el-input-number v-model="startNum" class="mx-4" :min="0" :max="10" controls-position="right" @change="redioChange('2')" /> -
        <el-input-number v-model="endNum" class="mx-4" :min="0" :max="10" controls-position="right" @change="redioChange('2')" /> 秒
      </el-radio>
      <el-radio value="3" label="3"
        >从 <el-input-number v-model="startSecond" class="mx-4" :min="0" :max="10" controls-position="right" @change="redioChange('3')" /> 秒开始,每
        <el-input-number v-model="everySecond" class="mx-4" :min="0" :max="10" controls-position="right" @change="redioChange('3')" /> 秒执行一次
      </el-radio>
      <el-radio value="4" label="4">指定 </el-radio>
      <div style="margin-left: 40px">
        <el-checkbox-group v-model="checkList" class="checkGroup" size="small" @change="redioChange('4')">
          <el-checkbox value="0" label="0" />
          <el-checkbox value="1" label="1" />
          <el-checkbox value="2" label="2" />
          <el-checkbox value="3" label="3" />
          <el-checkbox value="4" label="4" />
          <el-checkbox value="5" label="5" />
          <el-checkbox value="6" label="6" />
          <el-checkbox value="7" label="7" />
          <el-checkbox value="8" label="8" />
          <el-checkbox value="9" label="9" />
          <el-checkbox value="10" label="10" />
          <el-checkbox value="11" label="11" />
          <el-checkbox value="12" label="12" />
          <el-checkbox value="13" label="13" />
          <el-checkbox value="14" label="14" />
          <el-checkbox value="15" label="15" />
          <el-checkbox value="16" label="16" />
          <el-checkbox value="17" label="17" />
          <el-checkbox value="18" label="18" />
          <el-checkbox value="19" label="19" />
          <el-checkbox value="20" label="20" />
          <el-checkbox value="21" label="21" />
          <el-checkbox value="22" label="22" />
          <el-checkbox value="23" label="23" />
          <el-checkbox value="24" label="24" />
          <el-checkbox value="25" label="25" />
          <el-checkbox value="26" label="26" />
          <el-checkbox value="27" label="27" />
          <el-checkbox value="28" label="28" />
          <el-checkbox value="29" label="29" />
          <el-checkbox value="30" label="30" />
          <el-checkbox value="31" label="31" />
          <el-checkbox value="32" label="32" />
          <el-checkbox value="33" label="33" />
          <el-checkbox value="34" label="34" />
          <el-checkbox value="35" label="35" />
          <el-checkbox value="36" label="36" />
          <el-checkbox value="37" label="37" />
          <el-checkbox value="38" label="38" />
          <el-checkbox value="39" label="39" />
          <el-checkbox value="40" label="40" />
          <el-checkbox value="41" label="41" />
          <el-checkbox value="42" label="42" />
          <el-checkbox value="43" label="43" />
          <el-checkbox value="44" label="44" />
          <el-checkbox value="45" label="45" />
          <el-checkbox value="46" label="46" />
          <el-checkbox value="47" label="47" />
          <el-checkbox value="48" label="48" />
          <el-checkbox value="49" label="49" />
          <el-checkbox value="50" label="50" />
          <el-checkbox value="51" label="51" />
          <el-checkbox value="52" label="52" />
          <el-checkbox value="53" label="53" />
          <el-checkbox value="54" label="54" />
          <el-checkbox value="55" label="55" />
          <el-checkbox value="56" label="56" />
          <el-checkbox value="57" label="57" />
          <el-checkbox value="58" label="58" />
          <el-checkbox value="59" label="59" />
        </el-checkbox-group>
      </div>
    </el-radio-group>
  </div>
</template>

<script lang="ts" setup>
const radio = ref('1')
const second = ref('*')
const startNum = ref(0)
const endNum = ref(0)
const startSecond = ref(0)
const everySecond = ref(0)
const checkList = ref([])
const emit = defineEmits(['update:secondValue'])
let props = defineProps(['secondValue'])
const redioChange = (data: string) => {
  radio.value = data
  second.value = ''
  switch (data) {
    case '1':
      second.value = '*'
      break
    case '2':
      second.value = startNum.value + '-' + endNum.value
      break
    case '3':
      second.value = startSecond.value + '/' + everySecond.value
      break
    case '4':
      if (checkList.value.length == 0) {
        second.value = '*'
      } else {
        second.value = checkList.value.join(',')
      }
      break
    default:
      break
  }
  emit('update:secondValue', second)
}
watch(props, () => {
  if (props.secondValue) {
    if (props.secondValue.indexOf('/') !== -1) {
      startSecond.value = parseInt(props.secondValue.split('/')[0])
      everySecond.value = parseInt(props.secondValue.split('/')[1])
      radio.value = '3'
    } else if (props.secondValue.indexOf('-') !== -1) {
      startNum.value = parseInt(props.secondValue.split('-')[0])
      endNum.value = parseInt(props.secondValue.split('-')[1])
      radio.value = '2'
    } else if (props.secondValue.indexOf(',') !== -1) {
      checkList.value = props.secondValue.split(',')
      radio.value = '4'
    } else {
      second.value = props.secondValue
      radio.value = '1'
    }
  }
})
</script>
<style lang="scss" scoped>
.el-radio-group {
  display: grid;
  flex-direction: column;
  margin: 0px;
}
.el-radio {
  margin: 6px;
  padding: 6px;
}
.checkGroup {
  margin: 8px;
}
</style>
